<template>
    <div class="flex-box sea-page box">
        <div class="flex-header">
            <sea-table-title title="产品列表"></sea-table-title>
        </div>
        <div class="flex-body no-padding">
            <div class="flex-row with-gap border-bottom padding">
                <div class="flex-right border">
                    <img style="width: 64px; height: 64px;" src="/img/head_01.png" alt="Product Image">
                </div>
                <div class="flex-body">
                    <a>Samsung TV</a>
                    <span class="pull-right">$1800</span>
                    <span class="block">当前行使用 flex 布局.</span>
                    <span class="block">Samsung 32" 1080p 60Hz LED Smart HDTV.</span>
                </div>
            </div>

            <el-row class="products-list product-list-in-box">
                <!-- /.item -->
                <el-col class="item">
                    <div class="product-img">
                        <img src="/img/head_02.png" alt="Product Image">
                    </div>
                    <div class="product-info">
                        <a href="javascript:void(0)" class="product-title">Bicycle
                            <span class="label label-info pull-right">$700</span></a>
                        <span class="product-description">26" Mongoose Dolomite Men's 7-speed, Navy Blue.</span>
                    </div>
                </el-col>
                <!-- /.item -->
                <el-col class="item">
                    <div class="product-img">
                        <img src="/img/head_03.png" alt="Product Image">
                    </div>
                    <div class="product-info">
                        <a href="javascript:void(0)" class="product-title">Xbox One <span
                            class="label label-danger pull-right">$350</span></a>
                        <span
                            class="product-description">Xbox One Console Bundle with Halo Master Chief Collection.</span>
                    </div>
                </el-col>
                <!-- /.item -->
                <el-col class="item">
                    <div class="product-img">
                        <img src="/img/head_04.png" alt="Product Image">
                    </div>
                    <div class="product-info">
                        <a href="javascript:void(0)" class="product-title">PlayStation 4
                            <span class="label label-success pull-right">$399</span></a>
                        <span class="product-description">PlayStation 4 500GB Console (PS4)</span>
                    </div>
                </el-col>
                <!-- /.item -->
                <!--  </ul>-->
            </el-row>
        </div>
    </div>
</template>

<script>
/**
 *
 * 产品列表，类似于淘宝的购物车
 */
export default {
    name: "ProductList"
}
</script>

<style scoped lang="scss">
@use "./product.scss";
</style>
